import React from 'react';
import { Tabs, TabList, Tab, TabPanels, TabPanel, Box, chakra } from '@chakra-ui/react';
import { MdPhoneIphone, MdPerson, MdLock } from 'react-icons/md'; 
import { RiWechatFill, RiQqFill } from 'react-icons/ri';
import LoginPage from './LoginPage';
import RegistryPage from './RegistryPage';

const B = chakra('b', {
  baseStyle: {
    padding: '10px',
  }
})

function App() {
  return (
    <Box w='400px' shadow='0 0 8px rgb(0 0 0 / 10%)' margin='100px auto' p='50px 50px 30px'>
      <Tabs variant='unstyled' align='center' color='#969696'>
        <TabList mb='50px'>
          <Tab fontSize='lg' _selected={{ color: 'tomato', fontWeight: 'bold', borderBottom: '2px solid tomato' }} _focus={false}>登录</Tab>
          <B>·</B>
          <Tab fontSize='lg' _selected={{ color: 'tomato', fontWeight: 'bold', borderBottom: '2px solid tomato' }} _focus={false}>注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel p='0px'>
            <LoginPage />
          </TabPanel>
          <TabPanel p='0px'>
            <RegistryPage />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}

export default App;
